<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix" />
			<text class="title">找回密码</text>
		</view>
		<uni-steps :options="list1" :active="active" active-color="#00a660" />
		<view class="login-form-content">
			<view class="" v-if="active == 0">
				<view class="input-item flex align-center">
					<view class="iconfont icon-user icon"></view>
					<input v-model="loginForm.mobile" type="number" class="input" placeholder="请输入手机号" maxlength="11" />
				</view>
				<view class="input-item flex align-center">
					<view class="iconfont icon-code icon"></view>
					<input v-model="loginForm.smsCode" type="number" class="input" placeholder="请输入验证码" maxlength="6" />
					<text @click="getSMSCode(3)" class="login-code" v-show="btnShow">获取验证码</text>
					<text class="login-code text-primary" style="width: 140rpx;" v-show="!btnShow">{{counter}}</text>
				</view>
				<view class="passwordAction">
					<span><router-link :to="'./login'">前往登录</router-link></span>
					<view class="sounds-text" @click="getSMSCode(103)">收不到短信？使用语音验证码</view>
				</view>
			    <button @click="getSearchRes" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">下一步</button>
			</view>
				
			<view class="" v-if="active == 1">	
				<view class="input-item flex align-center">
					<view class="iconfont icon-password icon"></view>
					<input v-model="loginForm.password" type="password" class="input" placeholder="请输入新密码" />
				</view>
				<view class="input-item flex align-center">
					<view class="iconfont icon-password icon"></view>
					<input v-model="loginForm.rePassword" type="password" class="input" placeholder="请再次输入新密码" />
				</view>
			    <view class="login-txt text-primary" @click="login">前往登录</view>
			    <button @click="getNext" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">下一步</button>
		    </view>
			
			<view class="" v-if="active == 2" class="finish-block">
				<view class="align-center justify-center flex">
					<i class="iconfont finishIcon">&#xe6b2;</i><span>修改成功！</span>
				</view>
				<p>5秒后自动进入登录页面</p>
				<button @click="login" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">回到登录页面</button>
			</view>
		</view>
    <!--滑块验证弹出-->
    <slider-verify :show="verifyShow" :do-action="doAction" @success="touchSliderResult" @close="onClose"></slider-verify>
	</view>
</template> 

<script>
	import {checkSmsCode,backPassWordByMobile} from '@/api/login'
	import {getCode} from '@/utils/sendSmsCode'
  import SliderVerify from "../components/slider-verify/slider-verify";
	export default {
    components: {SliderVerify},
    mixins: [getCode],
    data() {
      return {
        active: 0,
        globalConfig: getApp().globalData.config,
        loginForm: {
          smsType: 3,
          mobile: "",
          password: "",
          smsCode: "",
          uuid: "",
          rePassword: "",
          shareReg: "",
        },
        list1: [{
          title: '账号校验'
        }, {
          title: '密码重置'
        }, {
          title: '完成设置'
        }],
      }
    },
		methods: {
			// 重置密码下一步
      getNext() {
        this.doAction = "null";
        // 检测异常操作
        if (this.sliderVerifyAddVerifyNumber()) {
          return;
        }
        if (this.loginForm.password !== this.loginForm.rePassword) {
          this.$modal.msgError("两次密码密码不相同")
        } else {
          let data = {mobile: this.loginForm.mobile, smsCode: this.loginForm.smsCode, password: this.loginForm.password}
          backPassWordByMobile(data).then((res) => {
            if (res.code === 200) {
              this.active = 2;
              setTimeout(() => {
                this.login()
              }, 5000)
            } else {
              this.$modal.msgError(res.msg)
            }
          });
        }
      },
			// 下一步
      getSearchRes() {
        if (this.loginForm.smsCode == "" || this.loginForm.mobile.length !== 11) {
          this.$modal.msgError("请填写信息")
        } else {
          let param = {mobile: this.loginForm.mobile, smsCode: this.loginForm.smsCode, smsType: 3}
          checkSmsCode(param).then((res) => {
            if (res.code === 200) {
              this.active = 1;
              uni.showToast({
                title: "请修改密码",
                icon: 'success',
                mask: true,
                duration: 2000
              })
            } else {
              this.$modal.msgError(res.msg)
            }
          });
        }
      },
			login() {
				this.$tab.navigateTo('/pages/login')
			},
			// 获取验证码
			getSMSCode(type) {
        this.verifyShow = true;
        this.doAction = "this.getCode(this.loginForm.mobile, this.loginForm.smsType)";
        this.loginForm.smsType = type
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color;
	}
	
	.passwordAction{
		margin-top: 6rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		a{
			color: #666;
			text-decoration: none;
		}
		.sounds-text{
			color: #777;
			font-size: 26rpx;
		}
	}
	
	.finish-block{
		font-size: 32rpx;
		p{
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #666;
		}
	}
	
	.finishIcon{
		font-size: 50rpx;
		color: #00a660;
		margin-right: 6rpx;
	}
	
	.uni-steps{
		margin: 70rpx auto 0;
	}
	
	.login-txt {
		text-align: right;
		margin-top: 6rpx;
	}

	.sms-input ::v-deep.is-input-border {
		background: #f5f6f7 !important;
		width: 95%;
		border: none;
		padding-left: 14rpx;
	}

	.text-primary {
		color: $uni-color-primary;
	}

	.gray-row {
		color: #777;
		margin: 15rpx 0;
		font-size: 26rpx;
	}

	.marginLeft {
		margin: 0 20rpx;
		vertical-align: middle;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 42rpx;
			text-align: center;
			padding-top: 25%;

			image {
				border-radius: 8rpx;
			}

			.title {
				margin-left: 20rpx;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 0 auto;
			margin-top: 10%;
			width: 80%;

			.input-item {
				margin: 40rpx auto 0;
				background-color: #f5f6f7;
				height: 90rpx;
				border-radius: 40rpx;

				.icon {
					font-size: 38rpx;
					margin-left: 20rpx;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
					padding-left: 30rpx;
				}

			}

			.login-btn {
				margin-top: 80rpx;
				height: 90rpx;
			}

		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code {
		width: 360rpx;
		color: $uni-color-primary;
	}

	.xieyi {
		color: #333;
		position: absolute;
		bottom: 3%;
		right: 0;
		left: 0;
	}
</style>
